<%@ page contentType="text/html;charset=UTF-8" language="java" %>
  <link rel="stylesheet" href="${static_url}/ui/app/assets/js/plugin/select/reset.css">
  <link rel="stylesheet" href="${static_url}/ui/app/assets/js/plugin/select/style.css">
  <script type="text/javascript" src="${static_url}/ui/app/assets/js/plugin/select/select.js"></script>

<div id="ishop-address">
<span>
  <select id="area-province" name="addressProvinceId" onchange="c1(this)"
  data-rule="required;" data-target="#address-msg" >
    <option value="">-请选择-</option>
  </select>
</span>

<span >
  <select id="area-city" name="addressCityId" onchange="c2(this)"
  data-rule="required;" data-target="#address-msg" >
      <option value="">-请选择-</option>
    </select>
</span>

<span>
  <select id="area-region" name="addressAreaId" style="margin-right:0;"
  data-rule="required;" data-target="#address-msg" >
      <option value="">-请选择-</option>
    </select>
</span>
<label id="address-msg"></label>
</div>
<script type="text/javascript">
//$("#area-province").append('<option value="hb">湖北省</option>');
$(function(){
  doAjax("${ctx}/address/getByParentId.htm", null, function(data){
    var list = $.parseJSON(data.json);
    var province = $("#area-province")[0];

    for(var i = 0; i < list.length; i++){
      //$("#area-province").append('<option value="'+list[i].id+'">'+list[i].name+'</option>');
      var length = province.options.length;
      province.options[length] = new Option(list[i].name, list[i].id);
    }
    //$("#area-province")[0].selectedIndex = 0;
    $("#area-province").render();
  });
});

function c1(obj){
  if($(obj).val().length == 0)return;
  loadCity($(obj).val());
}
function loadCity(parentId, cityValue, areaValue){
    doAjax("${ctx}/address/getByParentId.htm?parentId="+parentId, null, function(data){
          var list = $.parseJSON(data.json);
          var city = $("#area-city")[0];
          for(var i = city.options.length; i > 0 ; i--){
            city.remove(i);
          }
          for(var i = 0; i < list.length; i++){
            var length = city.options.length;
            city.options[length] = new Option(list[i].name, list[i].id);
          }
          //$("#area-city")[0].selectedIndex = 1;
          if(cityValue){
             $("#area-city").val(cityValue);
             $("#area-city").render();
             loadRegion(cityValue, areaValue);
          }else{
            $("#area-city").render();
              var region = $("#area-region")[0];
              for(var k = region.options.length; k > 0; k--){
                region.remove(k);
              }
              $("#area-region").render();
          }

    });
}

function c2(obj){
    if($(obj).val().length == 0)return;
    loadRegion($(obj).val());
}
function loadRegion(parentId, areaValue){
    doAjax("${ctx}/address/getByParentId.htm?parentId="+parentId, null, function(data){
          var list = $.parseJSON(data.json);
          var region = $("#area-region")[0];
          for(var k = region.options.length; k > 0; k--){
            region.remove(k);
          }
          for(var i = 0; i < list.length; i++){
            var length = region.options.length;
            region.options[length] = new Option(list[i].name, list[i].id);
          }
          if(areaValue){
            $("#area-region").val(areaValue);
          }else{
            $("#area-region")[0].selectedIndex = 1;
          }
          $("#area-region").render();
    });
}

//设置地址的值，用于修改地址的功能
function setArea(province, city, area){
    $("#area-province").val(province);
    $("#area-province").render();
    loadCity(province, city, area);
}
</script>